<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :pagination="false"
    :bordered="true"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'status'">
        <a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { TableColumnsType } from 'ant-design-vue';

interface SurvivalData {
  key: string;
  name: string;
  status: string;
  time: string;
}

// 定义恢复状态的排序权重
const getStatusWeight = (status: string): number => {
  switch (status) {
    case '未恢复': return 3;
    case '已恢复': return 2;
    case '不受影响': return 1;
    default: return 0;
  }
};

const columns: TableColumnsType = [
  {
    title: '业务名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '恢复状态',
    dataIndex: 'status',
    key: 'status',
    sorter: (a: SurvivalData, b: SurvivalData) => {
      const weightA = getStatusWeight(a.status);
      const weightB = getStatusWeight(b.status);
      console.log(`Comparing ${a.status}(${weightA}) with ${b.status}(${weightB})`);
      return weightB - weightA;  // 反转排序顺序，使得权重大的在前
    }
  },
  {
    title: '恢复时间',
    dataIndex: 'time',
    key: 'time',
  }
];

// 定义状态对应的颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '未恢复': return 'red';
    case '已恢复': return 'green';
    case '不受影响': return 'blue';
    default: return 'default';
  }
};

// 接收父组件传递的数据并确保每条数据都有key
const props = defineProps<{
  dataSource: SurvivalData[]
}>();
</script>

<style scoped>
:deep(.ant-table-thead > tr > th) {
  background-color: #f5f5f5;
  font-weight: bold;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 8px 16px;
}

:deep(.ant-tag) {
  margin-right: 0;
}
</style> 